<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="所属仓库" required>
          <el-select v-model="area" size="mini" placeholder="请选择" @change="changeArea">
            <el-option label="上雪仓" value="2"></el-option>
            <el-option label="东莞仓" value="1"></el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="使用类型">
          <el-radio v-model="classification" label="个人">个人</el-radio>
          <el-radio v-model="classification" label="公共">公共</el-radio>
        </el-form-item>-->
        <el-form-item label="分类选择" required>
          <el-select v-model="type" size="mini" placeholder="请选择">
            <el-option label="办公用品" value="shenzhen"></el-option>
            <el-option label="固定资产" value="hefei"></el-option>
          </el-select>
        </el-form-item>
        <p>资产登记</p>
        <el-form-item label="物品名称" required>
          <el-input v-model="productname" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="物品规格" required>
          <el-input v-model="specification" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数量" required>
          <el-input v-model="number" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="other" size="mini"></el-input>
        </el-form-item>

        <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
          <!--<p style="font-size:16px;font-weight: 900;margin-bottom: -10px;">审批人</p>-->
          <van-step v-show="oneShow">
            <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>

        </van-steps>

        <el-form-item>
          <el-button type="primary" size="mini" @click="submitPost"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Toast,Picker} from 'vant';
  Vue.use(Picker);
  Vue.use(VanImage);
export default {
  data() {
    return {
      area:"2",
      classification:"个人",
      type:"办公用品",
      productname:"",
      number:"",
      specification:"",
      other:"",

      nowUser:"",
      title: "资产登记",
      active:-1,

      addAssetApply: '/mobiles/addAssetApply',
      oneShow:false,
      oneLd:[],

    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
  },
  methods: {
    changeArea(value){
      if (value=='1'){
        debugger
        this.oneShow=true;
        //东莞仓，人事顾念与申请，主管进行审批；；上雪无需审批
        var ldcs2=[{name:"张亚萍",avatar:"http://wework.qpic.cn/wwhead/duc2TvpEgSQO4BpE0WZSZ3CGGicrhPT11AibFCUdHffpGY9lPYn8Kn7o2dAJjZYq4utPuadRaxRDQ/0"}];
        this.oneLd=ldcs2;
        /*this.$https.post('/mobiles/getSpld',{
          nowUser:this.nowUser,
        }).then((res)=>{
          if (res.data.data.ld2.length>0){
            this.oneShow=true;
            this.oneLd=res.data.data.ld2;
          }
        }).catch(err => {
          console.log(err);
        })*/
      }else {
        this.oneShow=false;
      }
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 提交
    submitPost() {
      if (!this.isNull()) return false;

      this.$https.post(this.addAssetApply, {
        nowUser:this.nowUser,
        area:this.area,
        classification:this.classification,
        type:this.type,
        other:this.other,
        productname:this.productname,
        number: this.number,
        specification:this.specification,

      }).then(res => {
        res.data;
        Toast("登记成功");
        this.$router.go(-1);
      }).catch(err => {
        console.log(err)
      });
    },
    //判断相关数据是否为空
    isNull() {
      if (this.area == '') {
        this.$toast("请选择仓库");
        return false;
      }
      if (this.type=='') {
        this.$toast("请选择分类");
        return false;
      }

      if (this.productname=='') {
        this.$toast("物品名称不能为空");
        return false;
      }
      if (this.specification=='') {
        this.$toast("物品规格不能为空");
        return false;
      }
      if (this.number=='') {
        this.$toast("数量不能为空");
        return false;
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>